<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Test3</title>
</head>
<body>
    <!-- 800; 300 + 500-->

    <!--<div style="width: 800px; height: 50px; background: red ; margin: auto">Hi-->
    <!--</div>-->

    <!--<div style="width: 800px; height: 50px; background: red ; margin: auto">-->
    <!--<div style="width: 300px; height: 150px;background: green; margin: auto auto; float: left; "></div>-->
    <!--<div style="width: 500px; height: 150px;background: orangered; margin: auto auto;float: right"></div>-->
    <!--</div>-->

    <!--<div style="width: 800px; height: 50px; background: red ; margin: auto; clear: both">Hi</div>-->


    <div style="width: 800px; margin: auto">

        <div style=" height: 50px; background: red ; ">Hi
        </div>

        <div style="width: 300px; height: 150px;background: green; float: left; "></div>
        <!--<div style="width: 500px; height: 150px;background: orangered;float: right;padding-left: 20px " ></div>-->
        <div style="width: 480px; height: 150px;background: orangered;float: right;"></div>
        <div style="height: 50px; background: red ; clear: both; ">版权所有</div>

        <!-- 当高度和行高相等时，内容垂直居中显示-->
        <div style=" background: gold ; clear: both; line-height: 30px;">版权所有</div>
    </div>
</body>
</html>